<template>
  <!--  <dv-full-screen-container>-->
  <div class="main-container h-full flex flex-col">
    <page-header class="absolute top-0 left-0 w-full z-10" />
    <div class="flex justify-between px-[36px] main-body">
      <!--    <div class="flex-1 flex px-[24px] main-body">-->
      <div class="flex flex-col h-full relative z-10 mt-[50px]">
        <green-house />
        <weather-info />
        <work-info />
        <market-info />
      </div>
      <div class="relative flex-1 flex flex-col items-center mt-[100px]">
        <home-marquee />
      </div>

      <div class="flex flex-col h-full relative z-10 mt-[50px]">
        <monitor />
        <solenoid-valve />
        <pesticide />
        <warning-info />
      </div>
    </div>
    <div class="map-container">
      <!--      <div class="watermark-mask"></div>-->
      <!--      <farm-map></farm-map>-->
    </div>
    <page-square />
    <farm-map />
    <img alt="" class="earth-image select-none" src="@/assets/images/earth.png" />
    <img alt="" class="bottom-bg" src="@/assets/images/page-bottom-bg.png" />
  </div>
</template>

<script lang="ts" setup>
  import PageHeader from '@/components/page-header.vue'
  import GreenHouse from '@/components/page-card/greenhouse.vue'
  import WeatherInfo from '@/components/page-card/weather-info.vue'
  import WorkInfo from '@/components/page-card/work-info.vue'
  import MarketInfo from '@/components/page-card/market-info.vue'
  import Monitor from '@/components/page-card/monitor.vue'
  import SolenoidValve from '@/components/page-card/solenoid-valve.vue'
  import Pesticide from '@/components/page-card/pesticide.vue'
  import WarningInfo from '@/components/page-card/waring-info.vue'
  import HomeMarquee from '@/components/home-marquee.vue'
  import PageSquare from '@/components/page-square.vue'
  import FarmMap from '@/components/farm-map.vue'
</script>

<style lang="scss" scoped>
  .main-container {
    position: relative;
    min-width: 1920px;
    height: 100vh;
    //width: 100vw;
    //height: 100vh;
    //background: linear-gradient(to bottom, #001c13, #001c13);
    background: url('@/assets/images/page-bg.png') no-repeat top left #001c13;
    background-size: 100% 100%;
    overflow: hidden;
    color: white;
    z-index: 100;
    .main-body {
      //height: calc(100vh - 100px);
    }
    .main-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      font-size: 32px;
      font-weight: bold;
    }
    .map-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;
      .watermark-mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #001c13;
        height: 30px;
        z-index: 1000;
      }
    }
  }

  .earth-image {
    position: absolute;
    top: 520px;
    left: 50%;
    width: 600px;
    transform: translate(-50%, -50%);
  }
  .bottom-bg {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }
</style>
